<template>
	<view class="content"> 
    <view>{{isReady ? 'TTS初始化完成' : '正在初始化...'}}</view>
    
    <!-- 已安装的TTS引擎列表 -->
    

    <!-- 语调 & 语速 & 合成文本 -->
    <view style="width: 700rpx;">
      <view class="uni-form-item uni-column">
        <view class="title">已安装的TTS引擎列表: </view>
        <radio-group name="radio" @change="onRadioChange">
          <label v-for="(item, index) in ttsList" :key="item.value">
            <radio :value="item.value" :checked="ttsName === item.value" />
            <text>{{item.name}}</text>
          </label>
        </radio-group>
      </view>
      <view style="height: 10rpx;"></view>
       <view class="uni-form-item uni-column">
          <view class="title">语调: </view>
          <slider max="100" min="0" :value="pitch" @change="onPicthChange" show-value></slider>
      </view>
      <view class="uni-form-item uni-column">
          <view class="title">语速: </view>
          <slider max="100" min="0" :value="speed" @change="onSpeedChange" show-value></slider>
      </view>
      <view class="uni-form-item uni-column">
       <view class="title">合成文本: </view>
       <input class="uni-input" v-model="text" />
      </view>
    </view>
    <view style="height: 20rpx;"></view>
    
    <!-- 引擎设置 -->
    <!-- 播放 -->
    <view style="display: flex;">
      <button class="title" size="mini" @click="showToast">Toast</button>
      <view style="width: 10rpx;"></view>
      <button class="title" size="mini" @click="init">Init TTS</button>
      <view style="width: 10rpx;"></view>
      <button class="title" size="mini" @click="getInstallTTS">获取已安装的TTS</button>
      <view style="width: 10rpx;"></view>
      <button class="title" size="mini" @click="play">播放</button>
      <view style="width: 10rpx;"></view>
      <button class="title" size="mini" @click="toTestBaidu">测试百度TTS</button>
    </view>
	</view>
</template>

<script>
  const SpeechTTS = uni.requireNativePlugin('MT-TTS-Speech');
  
	export default {
		data() {
			return {
				ttsList: [],
        isReady: false,
        pitch: 70,
        speed: 65,
        ttsName: '',
        text: '请。112号、张三，到，ABC、检查'
			}
		},
		onLoad() { },
    onUnload(){
      SpeechTTS.destroy();
    },
		methods: {
      toTestBaidu(){
        uni.redirectTo({
          url: '/pages/baidu/baidu'
        })
      },
      showToast(){
        SpeechTTS.toast('toast test');
      },
      onPicthChange(e){
        console.log('>> onPicthChange')
        this.picth = e.detail.value;
      },
      onSpeedChange(e){
        console.log('>> onSpeedChange')
        this.speed = e.detail.value;
      },
      onRadioChange(e){
        this.ttsName = e.target.value;
        console.log('>> set Engine:'+this.ttsName);
        const res = SpeechTTS.setEngine(this.ttsName);
        console.log('>> set Engine = ' + res);
      },
			init(){
        console.log('>> TTS:init...')
        SpeechTTS.init((callback) => {
          this.isReady = true;
          console.log('>> tts: init success');
        });

				SpeechTTS.onDone((res) => {
					console.log(">> tts: play end " + res)
				});
			},
      play(){
        console.log('>> tts: play...');
        console.log('>> pitch: '+this.pitch)
        console.log('>> speed: '+this.speed)
        console.log('>> text: '+this.text)
        
        SpeechTTS.setPitch(this.pitch);
        SpeechTTS.setSpeed(this.speed);
        const res = SpeechTTS.speak({ text:this.text });
        console.log('>> tts: play result = ' + res);
      },
      getInstallTTS(){
        console.log('>> tts: getInstallTTS');
        SpeechTTS.getInstallTTS(res => {
          console.log(JSON.stringify(res));
          if(!res || res.length <= 0){
            console.log('>> tts: TTS Engine not found');
            return
          }
          
          let list = [];
          res.forEach(v => {
            list.push({
              name: v.label,
              value: v.name,
            });
            console.log(v.label + '： ' +v.name)
          })
          this.ttsList = list;
        })
      },
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} 
  .tts-item {
    padding-bottom: 5rpx;
    border-bottom: 1px solid #3F536E;
  }
</style>
